<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <!--默认展示模板内容-->
  <c1></c1>

  <!--但是，我现在不想按照模板的样子展示，数据我还要？-->
  <c1>
    <!--2.5.x以前，必须使用template标签，以后任意标签都可以-->
    <!--slot-scope：绑定的是组件插槽的对象-->
    <template slot-scope="slotObject">
      <!--join：连接待遍历对象，中间用自定义字符串连接-->
      <span>{{slotObject.data.join(" - ")}}</span>
    </template>
  </c1>
</div>
<template id="cpn">
  <div>
    <!--插槽不能定义在组件模板的根-->
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>
<script>
  var vm = new Vue({
    el: '#app',
    components: {
      c1: {
        template: "#cpn",
        data() {
          return {
            pLanguages: ['Java', 'Web', 'JavaScript', 'Vue', 'Python']
          };
        }
      }
    }
  })
</script>
<script>
  module.exports = {
    flag: true,
    sum(a, b) {
      return a + b;
    },
    demo(a, b) {
      return a * b;
    }
  }

  // 模块引入
  let {sum, demo, flag} = require('molulaA')

  // 等同于
  let _mA = require('moduleA');
  let sum = _mA.test;
  let demo = _mA.demo;
  let flag = _mA.flag;

</script>

</body>
</html>